<%@page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
      <title>API接口查询</title>
      
      <style type="text/css">
          body{
             margin:0px;
             padding:0px;
          }
          .total{
             display:block;
             width:100%;
             height:100%;
             margin:0px;
             padding:0px;
          }
          .total_head{
             display:block;
             width:100%;
             height:20%;
             font-size:16px;
             color:black;
             font-weight:bold;
             margin:0px;
             padding:0px;
          }
          .total_body{
             display:block;
             width:100%;
             height:80%;
          }
          .total_body>.d1,.total_body>.d2{
             display:inline-block;
             height:100%;
             margin:0px;
             padding:0px;
             float:left;
          }
          .total_body>.d1{
             width:30%;
          }
          .total_body>.d2{
             width:70%;
          }
          #api{
             list-style:none;
             display:block;
             width:90%;
             margin-left:5%;
             height:100%;
             padding:0px;
          }
          
          
      </style>
   </head>
   <body>
      <div class="total">
         <nav class="total_head">
             <h3 align="center">接口文档</h3>
         </nav>
         <div class="total_body">
             <div class="d1">
                <ul id="apiData">
                    <li v-for="item in items" v-on:click="getData">{{item.id}}---{{item.name}}</li>
                </ul>
             </div>
             <div class="d2">
             </div>
         </div>
      </div>
   </body>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->
   <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.js" type="text/javascript" charset="utf-8"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       var apiList=new Vue({
    	   el:'#apiData',
    	   data:{
    		   items:[
    			   {id:123,name:'chenhao'},
    			   {id:1234,name:'chenhao1'},
    			   {id:12345,name:'chenhao2'},
    			   {id:123456,name:'chenhao3'}
    		   ]
    	   },
    	   methods:{
    		   getData:function(){
    			   this.$http.get('localhost:8801/api/getData').then((response) => {
                       console.log(response);
                       alert(response.data);
                   },function(){
                       alert('请求失败！');
                   });
    		   }
    	   }
       });
       
   </script>
</html>